<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title></title>
    <script src="jquery-1.11.3.js"></script>
    <link rel="stylesheet" href="css/index_css.css">
    <!--<link rel="stylesheet" type="text/css" href="css/component.css"/>-->
    <link href="css/style.css" rel="stylesheet" type="text/css">
    <!--<script src="js/modernizr.custom.js"></script>-->

    <script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js"></script>





    <script type="text/javascript">
        $(document).ready(function () {

            $(".prev,.next").hover(function () {
                $(this).stop(true, false).fadeTo("show", 0.9);
            }, function () {
                $(this).stop(true, false).fadeTo("show", 0.4);
            });

            $(".banner-box").slide({
                titCell: ".hd ul",
                mainCell: ".bd ul",
                effect: "fold",
                interTime: 3500,
                delayTime: 500,
                autoPlay: true,
                autoPage: true,
                trigger: "click"
            });

        });
    </script>
    <style>
        body{
            position: relative;
            min-height: 100%;
            height: 100%;
        }
        footer >img,footer>span{
            padding: 5%;
            width: 25%;
            box-sizing: border-box;
            display: inline-block;
            text-align: center;
            max-height: 3rem;
            max-width: 3rem;
        }
.pop {
position: absolute;top: 0;left: 0;right:0;background-color: white;
    display: none;
    z-index: 10;
}
        .pop li{
            height: 2rem;
            border-bottom: 1px solid grey;
            line-height: 2rem;
            padding-left: 1rem;
        }
        #shadow{
            position: fixed;
            top:0;bottom:0;left:0;right:0;
            background-color: black;
            opacity: 0.4;
            display: none;
            z-index: 5;
        }
    </style>
</head>
<body>
<header style="   position: relative;
        z-index: 10; background-color: white">
    <img style="float: left;width: 2rem;height:2rem"  src="images/header_back.png"/>

    <img id="img" class="btn" style="float: right;width: 2rem;height:2rem" src="images/top_category.png"/>
    <div style="padding: 0 3rem">
        <input style="background-image: url('images/search.png');
               background-color:#ddddff;
        font-size:2rem;width: 100%;
        background-size: 2.5rem;
        background-repeat:no-repeat;
        height: 2rem;
        border-radius: 1rem;
        z-index: 10;
        border:none" type="text" placeholder="     输入目的地">

    </div>

</header>
<div style="position: relative">
    <div class="pop" >

        <ul style="list-style-type: none;margin:0;padding-left: 0">
            <li>sadf</li>
            <li>sadf</li>
            <li>sadf</li>


        </ul>

    </div>
</div>


<div class="banner-box">
    <div class="bd">
        <ul>
            <li style="background: #F3E5D8;">
                <div class="m-width">
                    <a href="javascript:void(0);">
                        <img src="images/h_1.jpg" class="banner-img"/></a>
                </div>
            </li>
            <li style="background: #B01415">
                <div class="m-width">
                    <a href="javascript:void(0);">
                        <img src="images/h_2.jpg" class="banner-img"/></a>
                </div>
            </li>
            <li style="background: #C49803;">
                <div class="m-width">
                    <a href="javascript:void(0);">
                        <img src="images/h_3.jpg" class="banner-img"/></a>
                </div>
            </li>
            <li style="background: #FDFDF5">
                <div class="m-width">
                    <a href="javascript:void(0);">
                        <img src="images/h_4.jpg" class="banner-img"/></a>
                </div>
            </li>
        </ul>
    </div>
    <div class="banner-btn">
        <a class="prev" href="javascript:void(0);"></a><a class="next" href="javascript:void(0);"></a>
        <div class="hd">
            <ul>
            </ul>
        </div>
    </div>
</div>
<div style="height: 4rem;border-bottom: 1px solid grey;border-top: 1px solid grey">
    <div style="box-sizing: border-box;text-align: center;float: left;width: 50%; height: 100%;border-right: 1px solid grey "><img src="images/jd_arr1.png">热门景点</div>
    <div style="float: left;text-align: center;width: 50%; height: 100%"><img src="images/jd_arr1.png">热门景点</div>
</div>
<div style="height: 1rem;border-bottom: 1px solid grey;background-color: #aaaaaa"></div>
<div style="height: 3rem;border-bottom: 1px solid grey">
    <div style="box-sizing: border-box;text-align: center;float: left;width: 33%; height: 100%;border-right: 1px solid grey ">
        位置区域<img id="img2" class="btn" src="images/channelBg.png">
    </div>
    <div style="float: left;text-align: center; width: 33%;height: 100%;">达人推荐<img src="images/channelBg.png"></div>
    <div style="box-sizing: border-box;text-align: center;float: right;width: 33%; height: 100%;border-left: 1px solid grey ">
        全部主题<img src="images/channelBg.png">
    </div>
</div>
<div style="position: relative">
    <div class="pop" >

        <ul style="list-style-type: none;margin:0;padding-left: 0">
            <li>sadf</li>
            <li>sadf</li>
            <li>sadf</li>


        </ul>

    </div>
</div>

<div style="height: 50%">


    <div style="height: 25%;border-bottom: 1px solid grey;"><img style="margin:0.5rem 0;width:27%;border-radius: 0.5rem;" src="images/jd_pic.jpg">
    <span style="width: 30%;float: right "><div style="font-size: 1.5rem;color: gold;margin-top: 30%">￥100起</div><div>240</div></span>
        <span style="width: 43%;float: right "><div style="font-size: 1.1rem;margin-top: 20%">洞头望海楼景区</div><div>风景名胜</div><div style="color: grey">已售280</div></span>
    </div>
    <div style="height: 25%;border-bottom: 1px solid grey;"><img style="margin:0.5rem 0;width:27%;border-radius: 0.5rem;" src="images/jd_pic.jpg">
        <span style="width: 30%;float: right "><div style="font-size: 1.5rem;color: gold;margin-top: 30%">￥100起</div><div>240</div></span>
        <span style="width: 43%;float: right "><div style="font-size: 1.1rem;margin-top: 20%">洞头望海楼景区</div><div>风景名胜</div><div style="color: grey">已售280</div></span>
    </div>
    <div style="height: 25%;border-bottom: 1px solid grey;"><img style="margin:0.5rem 0;width:27%;border-radius: 0.5rem;" src="images/jd_pic.jpg">
        <span style="width: 30%;float: right "><div style="font-size: 1.5rem;color: gold;margin-top: 30%">￥100起</div><div>240</div></span>
        <span style="width: 43%;float: right "><div style="font-size: 1.1rem;margin-top: 20%">洞头望海楼景区</div><div>风景名胜</div><div style="color: grey">已售280</div></span>
    </div>
    <div style="height: 20%;text-align: center;margin-bottom: 20%">点击查看更多...</div>

</div>
<footer style="background-color: #ccddee;position: fixed;left: 0;right: 0;bottom: 0;height: 4rem;">
    <div style="float:left;width: 25%;text-align: center"><img src="images/bottom_home.png"><div>首页</div></div>
    <div style="float:left;width: 25%;text-align: center"><img src="images/bottom_find.png"><div>发现</div></div>
    <div style="float:left;width: 25%;text-align: center"><img src="images/bottom_shop.png"><div>购物车</div></div>
    <div style="float:left;width: 25%;text-align: center"><img src="images/bottom_mine.png"><div>我的</div></div>
</footer>
<div id="shadow" ></div>
<script>

$("")

  // var node=$("#img")[0];
  var p=$(".pop")[0];


   var shadow=$("#shadow")[0];



//   var pop=function (){
//       // alert("点击");
//       if(p.style.display==""){
//           p.style.display="block";
//           shadow.style.display="block";
//       }else{
//           p.style.display="";
//           shadow.style.display="";
//       }};
     // node.addEventListener("click",pop );
  // $("#img").click(pop);


$(function(){
    $(".btn").click(function(){
        var index=$(".btn").index(this);
        if($(".pop").eq(index).css("display")=='none'){

            $(".pop").hide();
            $(".pop").eq(index).show();
            $("#shadow").show();
        }else{
            $(".pop:first").hide();
            $("#shadow").hide();
        }
    })
})


   var area=$("#img2")[0];
    area.addEventListener("click",function pp(){
//        if(p2.style.display==""){
//            p2.style.display="block";
//            shadow.style.display="block";
//        }else{
//            p2.style.display="";
//            shadow.style.display="";
//        }

                var p2=$(".pop")[1];
                p2.style.display="block";
                var pos=getOffsetSum(p2);
                shadow.style.top=pos.top+"px";
                shadow.style.left=pos.left+"px";
                shadow.style.display="block";
            }

    );






   function getOffsetSum(elem) {
       var top=0, left=0

       while(elem) {
           top = top + parseInt(elem.offsetTop)
           left = left + parseInt(elem.offsetLeft)
           elem = elem.offsetParent
       }

       return {top: top, left: left}
   }

</script>
</body>
</html>